<template>
	<view>
		<navNav :navobj="navobj"></navNav>
		<view class="imgBox">
			<image class="img" :src="detail.picUrl" mode="widthFix"></image>
		</view>
		<view class="userBox">
			<view class="avatarBox">
				<image class="avatar" :src="commentUser.avatar?commentUser.avatar : '../../static/img/home/exp.jpg' "></image>
				<view class="nickBox">
					<view class="nick">{{commentUser.nickName}}</view>
					<view class="where">{{commentUser.phonenumber}}</view>
				</view>
			</view>
			<view class="share" style="position: relative;">
				<uni-icons class="icon" type="undo-filled"></uni-icons>
				<view class="text">分享</view>
				<button style="position: absolute;top:0;left: 0;width: 100%;height: 100%; border: none;background: transparent;" open-type="share"></button>
			</view>
		</view>
		<view class="rateBox">
			<uni-rate readonly :value="score?score:1" />
			<view class="time">{{comment.createTime}}</view>
		</view>
		<view class="tagsBox">
			<view class="tag" v-for="(item,index) in comment.labelList" :key="index">{{item}}</view>
		</view>
		<view class="title">{{detail.title}}</view>
		<view class="content">
			{{comment.comment || '没有文字评价'}}
		</view>
		<view style="height: 230rpx;"></view>
		<view class="buttonBox">
			<view style="display: flex;align-items: center;">
				<image mode="aspectFill" class="img" :src="comment.item.image"></image>
				<view class="title">{{comment.item.storeName}}</view>
			</view>
			<view class="button" @click="toShopDetail()">体验同款服务</view>
		</view>
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance,onMounted} from 'vue'
	import {onLoad,onShow,onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {useNavStore} from '@/store/index.js'//引入空间
	const navStore = useNavStore()//给空间命名
	const { detail} = storeToRefs(navStore);//解构数据
	const {proxy} = getCurrentInstance()
	
	const navobj = reactive({
		  title:'用户评价',
			image:true
	})
	
	const comment = ref({})
	const commentUser = ref({})
	const score = ref('')
	onLoad(()=>{
		console.log('this.detail',detail.value);
		comment.value =  detail.value.comment
		commentUser.value= detail.value.comment.commentUser
		score.value = detail.value.comment.score
		
	})
	const toShopDetail=()=>{
		uni.navigateTo({
			url: '/pages-detail/shop-detail/shop-detail?id=' + detail.value.comment.targetId
		})
	}
	onShareAppMessage((res)=>{
		if (res.from === 'button') { // 来自页面内分享按钮
			console.log(res.target)
		}
		return {
			title: '自定义分享标题',
			path: '/pages/home/detail'
		}
	}) 
	onShareTimeline((res)=>{
		return {
			title: '标题', //分享标题 这个可以根据业务需求去定义
			path: '当前需要进行分享页面的地址' //例如：path: 'page/home/index'
		}
	})
	
	
		
		
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.buttonBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-top: 18rpx solid #f5f5f5;
		position: fixed;
		bottom: 0px;
		z-index: 999;
		width: 750rpx;
		height: 150rpx;
		.img{
			height: 100rpx;
			width:100rpx;
			border-radius: 100%;
		}
		.title{
			font-weight: bold;
			margin-left: 5px;
		}
		.button{
			background: $linerBlue;
			color: white;
			padding: 10px 15px;
			border-radius: 20px;
		}
	}
	
	.title{
		padding: 0px 20px;
		font-weight: bold;
		font-size: 14px;
	}
	
	.content {
		padding: 0px 20px;
		padding-bottom: 20px;
		font-size: 14px;
		margin-top: 5px;
	}

	.tagsBox {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding: 10px 20px;
		padding-right: 10px;

		.tag {
			padding: 5px 12px;
			border-radius: 10px;
			background-color: #e6f8fc;
			color: #0bafee;
			font-size: 15px;
			margin-right: 10px;
			margin-bottom: 10px;
		}
	}

	.rateBox {
		padding: 0px 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.time {
			color: $grey;
			font-size: 14px;
		}
	}

	.userBox {
		padding: 20px 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.avatarBox {
			display: flex;
			align-items: center;
			margin-left: 20px;

			.avatar {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				margin-right: 5px;
			}

			.nick {
				font-weight: bold;
			}

			.where {
				font-size: 12px;
				color: $grey;
				margin-top: 5px;
			}
		}

		.share {
			display: flex;
			align-items: center;
			background-color: $shollowGrey;
			color: $grey;
			padding: 5px 10px;
			padding-right: 20px;
			border-radius: 20px 0 0 20px;

			.icon {
				color: $grey !important;
				margin-right: 5px;
			}
		}
	}

	.imgBox {
		width: 100vw;

		.img {
			width: 100%;
		}
	}
</style>